<template>
  <div class="main-div">
    <div class="search-div">
      <el-form
        :inline="true"
        :model="queryParam"
        class="demo-form-inline"
      >
        <el-form-item label="菜单编码:">
          <el-input
            v-model="queryParam.menuCode"
            class="text-input"
            placeholder="请输入菜单编码"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item label="菜单名称:">
          <el-input
            v-model="queryParam.menuName"
            class="text-input"
            placeholder="请输入菜单名称"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="addNewDialog"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div class="main-table">
        <el-table
          :data="menuTree"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          row-key="menuCode"
          tooltip-effect="dark"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="menuCode"
            label="菜单编码"
            width="100"
          />
          <el-table-column
            prop="menuName"
            label="菜单名称"
            width="180"
          />
          <el-table-column
            prop="menuFatherCode"
            label="父级编码"
            width="180"
          />
          <el-table-column
            prop="menuPath"
            label="菜单路径"
            width="180"
          />
          <el-table-column
            prop="menuUrl"
            label="详细路径"
            width="180"
          />
          <el-table-column
            label="菜单等级"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ getLvlName(scope.row.menuLvl) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="菜单状态"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.menuStatus==='0'?'正常':'停用' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="menuSort"
            label="排序号"
            width="80"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
          />
          <el-table-column
            prop="updateTime"
            label="修改时间"
            width="180"
          />

          <el-table-column
            fixed="right"
            label="操作"
            width="180"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleEditClick(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="handleDeleteClick(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <!--        <el-pagination-->
        <!--          background-->
        <!--          layout="prev, pager, next"-->
        <!--          :total="pageInfo.total"-->
        <!--          :page-size="pageInfo.size"-->
        <!--          :current-page="pageInfo.current"-->
        <!--          @current-change="handlePageChange"-->
        <!--          @next-click="handlePageChange"-->
        <!--          @prev-click="handlePageChange"-->
        <!--        />-->
      </div>
    </div>

    <div>
      <el-dialog
        :title="saveFlag==='edit'?'修改菜单':'新增菜单'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="500"
      >
        <el-form
          label-position="left"
          label-width="80px"
          :model="saveObject"
          size="small"
        >
          <el-form-item label="菜单编码">
            <el-input v-model="saveObject.menuCode" :disabled="saveFlag==='edit'" />
          </el-form-item>
          <el-form-item label="菜单名称">
            <el-input v-model="saveObject.menuName" />
          </el-form-item>
          <el-form-item label="菜单等级">
            <el-select
              v-model="saveObject.menuLvl"
              style="width: 100%"
              @change="menuSelectChange"
            >
              <el-option
                label="一级菜单"
                value="1"
              />
              <el-option
                label="二级菜单"
                value="2"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="saveObject.menuLvl==='2'"
            label="父级菜单"
          >
            <el-select
              v-model="saveObject.menuFatherCode"
              style="width: 100%"
            >
              <el-option
                v-if="parentMenu.length===0"
                label="--无数据--"
                value="-1"
              />
              <el-option
                v-for="item in parentMenu"
                :key="item.menuCode"
                :label="item.menuName"
                :value="item.menuCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="菜单路径">
            <el-input v-model="saveObject.menuPath" />
          </el-form-item>
          <el-form-item label="详细路径">
            <el-input v-model="saveObject.menuUrl" />
          </el-form-item>
          <el-form-item label="菜单状态">
            <el-select
              v-model="saveObject.menuStatus"
              style="width: 100%"
            >
              <el-option
                label="正常"
                value="0"
              />
              <el-option
                label="停用"
                value="1"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="菜单排序">
            <el-input v-model="saveObject.menuSort" />
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="save"
          >保 存</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import {menuPage, listMenu, addMenu, updateMenu, deleteMenu} from '../../api/manager/menu'
  import {dateFormat} from '../../utils/utils'

  export default {
    name: 'MenuMgr',
    data () {
      return {
        viewDialogVisible: false,
        dialogVisible: false,
        menuPojo: {
          menuLvl: '1'
        },
        saveFlag: 'add',
        pageInfo: {
          pageSize: 10,
          pageNum: 1,
          total: 0
        },
        menuTree: [],
        queryParam: {
        },
        // 已被多选的值
        multipleSelection: [],
        saveObject: {
        },
        parentMenu: []
      }
    },
    computed: {
      ...mapGetters([
        'wsMsg'
      ])
    },
    watch: {
      // 监测 wsMsg
      wsMsg: function (msg) {

      }
    },
    created () {
      this.loadData();
    },
    methods: {
      // 初始查询
      loadData () {
          this.queryParam.pageSize = this.pageInfo.pageSize;
          this.queryParam.pageNo = this.pageInfo.pageNum;
        // 初始查询数据
        menuPage(this.queryParam).then(res => {
          this.menuTree = res;
        })
      },
      onSubmit () {
        this.loadData();
      },
      openCreateDialog () {
        this.dialogVisible = true;
      },
      handlePageChange (pageNum) {
        this.pageInfo.pageNum = pageNum;
        this.loadData();
      }, addNewDialog () {
        this.saveFlag = 'add';
        this.dialogVisible = true
        this.saveObject = {
          menuStatus: '0',
          createTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          updateTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
        };
      }, handleEditClick (row) {
        this.saveFlag = 'edit';
        this.dialogVisible = true
        this.saveObject = row;
        this.saveObject.updateTime = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
      }, handleDeleteClick (row) {
        this.$confirm('确认删除此条菜单数据?', '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定之后删除
          deleteMenu(row).then(result => {
            this.$message.success('删除成功！')
            this.loadData();
          });
        }).catch(() => {
          console.log('取消删除..');
        });
      }, save () {
        if (this.saveObject.menuLvl === '1') {
          this.saveObject.menuFatherCode = ''
        }
        this.dialogVisible = false
        if (this.saveFlag === 'edit') {
          updateMenu(this.saveObject).then(result => {
            this.$message.success('更新成功！')
            this.loadData();
          })
        } else {
          addMenu(this.saveObject).then(result => {
            this.$message.success('新增成功！')
            this.loadData();
          })
        }
      }, getLvlName (lvlCode) {
        if (lvlCode === '1') {
          return '一级菜单'
        }
        if (lvlCode === '2') {
          return '二级菜单'
        }
        return ''
      },
      menuSelectChange () {
        if (this.saveObject.menuLvl === '2') {
          listMenu(this.menuPojo).then(res => {
            this.parentMenu = res;
          })
        }
      }
    }
  }
</script>

<style>
  .dashboard-container .el-dialog__header {
    border-bottom: 1px solid #dedede;
  }

  .dashboard-container .el-dialog__title {
    font-size: 16px;
    color: #333;
  }
</style>
<style scoped lang="scss">

  .main-div {
    padding: 20px 0 0 30px;

    .main-table {
      width: 100%;
      position: relative;
      height: 1200px;
      display: inline-block;
      vertical-align: top;
      border-radius: 5px;

      .hide-point-div {
        border-radius: 5px;
        width: 16px;
        height: 16px;
        z-index: 999;
        position: absolute;
      }

      .main-table-div {
        border-radius: 15px;
        border: 3px solid #3a5063;
        margin: 16px;
        padding: 16px;
        display: flex;
        position: relative;
        z-index: 1000;
        left: 100px;

        .link-left-node-div {
          width: 16px;
          height: 16px;
          background-color: #123456;
          position: absolute;
          right: 0px;
          top: 57px;
          z-index: 1000;
        }
      }

      .assist-table-div {
        border-radius: 15px;
        display: flex;
      }

      .float-table-div {
        margin-right: 10px;
        font-size: 12px;
        height: 100%;

        .btn-pos {
          border: 1px solid #99a9bf;
          background-color: #409EFF;
          color: #034460;
        }

      }

      .float-link-div {
        width: 10px;
        height: 100%;
        z-index: 1000;

        .link-right-node-div {
          top: 50%;
          margin-left: -16px;
          margin-top: 45px;
          height: 16px;
          width: 16px;
          background: #123456;
          z-index: 1000;
        }
      }
    }
  }

  .main-master {
    width: 50%;
    float: left;
    margin: 20px;
  }

  .main-all-master {
    float: left;
  }

  .main-dependent {
    float: left;
    border: 1px;
    box-sizing: border-box;
  }

  .main-all-dependent {
    float: left;
  }

  .text-input {
    width: 180px;
  }

  .tableInfo-div {
    height: 480px;
    overflow: auto;
  }

  .search-div {
  }

</style>
